<script setup lang="ts">
  import { useMeta } from 'quasar'
  useMeta({ title: ' ' })
  import { ref, useTemplateRef } from 'vue'
  import { useQuasar } from 'quasar'
  import { api } from 'boot/axios'
  const $q = useQuasar()
  const nameRef = ref('')
  const phoneRef = ref('')
  const zoneRef = ref([])
  const houseRef = ref('')
  const areaRef = ref('')
  const budgetRef = ref('')
  const orientationRef = ref('')
  const floorRangeRef = ref('1~10楼')
  const isSharedRef = ref('否')
  const timeRef = ref('周末')

  const formRef = useTemplateRef('form')

  const zoneOptions = [
    '光明区',
    '龙华区',
    '宝安区',
    '福田区',
    '南山区',
    '罗湖区',
    '盐田区',
    '龙岗区',
    '坪山区',
    '大鹏新区'
  ]
  const houseOptions = ['单间', '一房一厅', '两房一厅', '三房一厅']
  const areaOptions = ['0~35m²', '35~50m²', '50~90m²', '90m²以上']
  const budgetOptions = [
    '1000元~2000元',
    '2000元~3000元',
    '3000元~4000元',
    '4000元~5000元',
    '5000元以上'
  ]
  const orientationOptions = ['东', '南', '西', '北', '东南', '东北', '西南', '西北']
  const floorOptions = [
    {
      label: '1~10楼',
      value: '1~10楼'
    },
    {
      label: '11~21楼',
      value: '11~21楼'
    },
    {
      label: '21楼以上',
      value: '21楼以上'
    }
  ]
  const shareOptions = [
    {
      label: '是',
      value: '是'
    },
    {
      label: '否',
      value: '否'
    }
  ]
  const timeOptions = [
    {
      label: '工作日',
      value: '工作日'
    },
    {
      label: '周末',
      value: '周末'
    },
    {
      label: '随时可看',
      value: '随时可看'
    }
  ]

  function submitData() {
    const data = {
      name: nameRef.value,
      phone: phoneRef.value,
      queryArea: zoneRef.value.join(','),
      houseType: houseRef.value,
      areaRange: areaRef.value,
      budgetRange: budgetRef.value,
      orientation: orientationRef.value,
      floorRange: floorRangeRef.value,
      isShared: isSharedRef.value,
      viewingTime: timeRef.value
    }
    api
      .post('/house/survey-form', data, {
        headers: {
          'Content-Type': 'application/json',
          Accept: 'application/json'
        }
      })
      .then((res: any) => {
        if (res.data) {
          $q.notify({
            type: 'positive',
            message: '提交成功'
          })
        }
      })
      .catch(() => {
        $q.notify({
          color: 'red-5',
          textColor: 'white',
          icon: 'warning',
          message: '提交失败'
        })
      })
  }

  function onSubmit() {
    if (formRef.value) {
      ;(formRef.value as any).validate().then((success: boolean) => {
        if (success) {
          submitData()
        }
      })
    }
  }
</script>

<template>
  <div class="w-screen h-screen bg-white ud-page">
    <div class="title">若您后续打算在深租房，可填信息</div>
    <q-separator spaced />
    <q-img src="../assets/images/banner.png" class="w-full h-auto"></q-img>
    <div class="ud-form-box">
      <q-form @submit="onSubmit" ref="form" class="m-[20px]">
        <p class="ud-label">
          <b>*</b>
          姓名
        </p>
        <q-input
          class="mb-3"
          outlined
          v-model="nameRef"
          hint=""
          lazy-rules
          :rules="[val => (val && val.length > 0) || '请填写姓名']"></q-input>
        <p class="ud-label">
          <b>*</b>
          电话
        </p>
        <q-input
          class="mb-3"
          outlined
          v-model="phoneRef"
          hint=""
          lazy-rules
          :rules="[val => (val && val.length > 0) || '请填写电话或手机号']"></q-input>
        <p class="ud-label">
          1、
          <b>*</b>
          意向区域
          <i class="text-[#ccc] font-not-italic text-[14px]">(多选)</i>
        </p>
        <q-select
          class="mb-4"
          multiple
          lazy-rules
          :rules="[val => (val && val.length > 0) || '请选择意向区域']"
          outlined
          v-model="zoneRef"
          :options="zoneOptions" />
        <p class="ud-label">
          2、
          <b>*</b>
          几房房源
        </p>
        <q-select
          class="mb-4"
          outlined
          v-model="houseRef"
          lazy-rules
          :rules="[val => (val && val.length > 0) || '请选择房源']"
          :options="houseOptions" />
        <p class="ud-label">
          3、
          <b>*</b>
          意向面积
        </p>
        <q-select
          class="mb-4"
          lazy-rules
          :rules="[val => (val && val.length > 0) || '请选择意向面积']"
          outlined
          v-model="areaRef"
          :options="areaOptions" />
        <p class="ud-label">
          4、
          <b>*</b>
          预算范围
        </p>
        <q-select
          class="mb-4"
          lazy-rules
          :rules="[val => (val && val.length > 0) || '请选择预算范围']"
          outlined
          v-model="budgetRef"
          :options="budgetOptions" />
        <p class="ud-label">5、理想朝向</p>
        <q-select class="mb-4" outlined v-model="orientationRef" :options="orientationOptions" />
        <p class="ud-label">6、理想楼层</p>
        <q-option-group
          class="mb-4"
          v-model="floorRangeRef"
          :options="floorOptions"
          color="primary" />
        <p class="ud-label">7、是否介意楼龄</p>
        <q-option-group
          class="mb-4"
          v-model="isSharedRef"
          :options="shareOptions"
          color="primary" />
        <p class="ud-label">8、方便看房时间</p>
        <q-option-group class="mb-4" v-model="timeRef" :options="timeOptions" color="primary" />

        <div>
          <q-btn
            size="1.5rem"
            class="w-full bg-[#2265D4]"
            text-color="white"
            label="确认提交"
            type="submit" />
        </div>
      </q-form>
    </div>
  </div>
</template>

<style scoped>
  .ud-page {
    font-family:
      PingFangSC,
      PingFang SC,
      MicrosoftYaHei;
    font-size: 16px;
    color: #333;
  }
  .title {
    font-weight: 600;
    text-align: center;
    height: 56px;
    line-height: 56px;
  }
  .ud-label b {
    color: #eb4242;
  }
  :deep(.q-option-group) > div {
    border: 1px solid #eee;
    border-bottom: 0;
  }
  :deep(.q-option-group) > div:last-child {
    border-bottom: 1px solid #eee;
  }
  :deep(.q-option-group) .q-radio {
    width: 100%;
  }
  .ud-form-box {
    padding: 20px;
    border: 1px solid #fff;
    background-color: #fff;
    border-radius: 50px;
    position: relative;
    top: -100px;
  }
</style>
